<template>
  <div class="">
	<!-- 引入菜单组件 -->
	<vNavlist />
	<!-- 教师数据 -->
	<div class="class">
		<p class="title">教室违纪数据</p>	
		<div id="myChart"></div>
	</div>
  </div>
</template>

<script>
import vNavlist from "@/components/vNavlist.vue"
export default {
	name: 'vClass',
	mounted(){
		this.draImg()
	},
	components:{
		vNavlist
	},
	data () {
		return {
		}
	},
	methods:{
		draImg(){
			// 基于准备好的dom，初始化echarts实例
			let myChart = this.$echarts.init(document.getElementById("myChart"));
			// console.log(myChart)
			// 绘制图表
			myChart.setOption({
				title: {
				  text: "违纪数据",
				  subtext: "",
				  left: "center"
				},
				xAxis: {
				        type: 'category',
				        data: ["1月", "2月", "三月", "4月", "5月", "6月", "7月","8月","9月","10月","11月",'12月']
				    },
				yAxis: {
					type: 'value'
				},
				series: [{
					 data: [82, 32, 90, 93, 29, 30, 13,20,30,40,25,65],
					type: 'line'
				}]
			});
		}
	}
}
</script>;

<style>
	.class{
		height: 500px;
		margin: 50px 10px;
		position: relative;
		background: #DDD;
	}
	.title{
		border-bottom: 4px solid white;
		line-height: 40px;
		font-weight: bold;
	}
	.class #myChart{
	  position: absolute;
	  top: 40px;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  margin: auto;
	  width: 700px;
	  height: 400px;
	}
</style>
